<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>问卷编辑器</title>

    <meta name="viewport" content="width=device-width"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
    <script src="https://surveyjs.azureedge.net/1.8.12/survey.ko.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ace.min.js" type="text/javascript"
            charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ext-language_tools.js" type="text/javascript"
            charset="utf-8"></script>
    <link href="https://surveyjs.azureedge.net/1.8.12/survey-creator.min.css" type="text/css" rel="stylesheet"/>
    <script src="https://surveyjs.azureedge.net/1.8.12/survey-creator.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"></script>
</head>
<body>

<div id="surveyContainer">
    <div id="creatorElement"></div>
</div>

<div style="padding-top: 30px;padding-bottom: 10px;text-align: center;color: darkgray">
    杨海嘉作品,使用surveyJS
</div>

</body>
{#ace_layer ace_text-layer#}

<script>

    {#    函数，用于解析结尾的参数#}

    function getParam() {
        let para = /\d+/
        if (window.location.pathname.match(para) != undefined) {
            return window.location.pathname.match(para)[0];
        } else {
            return undefined;
        }

    }


    SurveyCreator
        .StylesManager
        .applyTheme("bootstrap");

    //Add a tag property to all questions
    SurveyCreator.localization.currentLocale = "zh-cn";//显示中文
    Survey
        .Serializer
        .addProperty("question", {
            name: "tag",
            category: "general"
        });
    // Change the order of name and title properties, remove the startWithNewLine property and add a tag property
    SurveyCreator
        .SurveyQuestionEditorDefinition
        .definition["question"]
        .properties = [
        "title",
        "name", {
            name: "tag",
            title: "Tag"
        }, {
            name: "visible",
            category: "checks"
        }, {
            name: "isRequired",
            category: "checks"
        }
    ];
    let id = undefined;
    id = getParam();

    var creatorOptions = {};
    var creator = new SurveyCreator.SurveyCreator("creatorElement", creatorOptions);
    creator.showToolbox = "right";
    creator.showPropertyGrid = "right";
    creator.rightContainerActiveItem("toolbox");


    let content = {}
    {#判断你的id，有的话进入编辑状态#}
    if (id !== undefined) {
        content["id"] = id;
        $.ajax({
                type: "post",
                url: "http://127.0.0.1:5000/getsurvey",
                data: content,
                dataType: "json",
                success: function (response) {
                    // return {"code":200,"message":"提交成功!"}
                    if (response.code == 200 || response.code == '200') {
                        console.log(response["survey"]);
                        creator.text = response["survey"].toString();
                    } else {
                        swal("失败", response.message, "error");
                    }
                },
                error: function (err) {
                    swal("系统错误!", "请稍后再试!", "error");
                    console.log(err.responseText);

                }
            }
        );
    }
    {#没有id，进入新建模式#}
    else{
{#        console.log("I in");#}

{#       let basic_json={#}
{# "pages": [#}
{#  {#}
{#   "name": "页面1",#}
{#   "elements": [#}
{#    {#}
{#     "type": "html",#}
{#     "name": "问题1",#}
{#     "html": "<p>请输入考试的起止日期和时间,请放心，在测试时这个字段不会被显示</p>\n开始时间：<input type=datetime-local name=\"starttime\">\n\n结束时间:<input type=datetime-local name=\"endtime\">"#}
{#    }#}
{#   ]#}
{#  }#}
{# ]}#}

{#       creator.JSON=basic_json;#}
            }

    var localStorageName = "SaveLoadSurveyCreatorExample";
    //Setting this callback will make visible the "Save" button
    creator.saveSurveyFunc = function (saveNo, callback) {
        //save the survey JSON
        console.log(creator.text);
        let newSurvey = {}
        newSurvey["content"] = creator.text;

        //You can store in your database JSON as text: creator.text  or as JSON: creator.JSON
        $.ajax({
            type: "post",
            url: "http://127.0.0.1:5000/newsurvey",
            data: newSurvey,
            dataType: "json",
            success: function (response) {
                // return {"code":200,"message":"提交成功!"}
                if (response.code == 200 || response.code == '200') {
                    swal("完成", response.message, "success");
                {#    todo :留一个要刷新的代码or跳转到其他页面#}
                } else {
                    swal("失败", response.message, "error");
                }
            },
            error: function (err) {
                swal("系统错误!", "请稍后再试!", "error");

            }
        });
        {#window#}
        {#    .localStorage#}
        {#    .setItem(localStorageName, creator.text);#}

        //We assume that we can't get error on saving data in local storage
        //Tells creator that changing (saveNo) saved successfully.
        //Creator will update the status from Saving to saved
        callback(saveNo, true);
    }


</script>
</html>